<template>
	<el-col :span="24" class="main">	
		<!-- 数据面板 -->
		<el-col :span="24" class="dataPanel">
			<ContentTitle>
				<el-button slot="button" type="success" size="small" @click="getBtnClickFunc" :icon="getIconClass">{{getBtnName}}</el-button>
			</ContentTitle>
			<router-view class="dataPanelContent" name="settingsInfo"></router-view>
        </el-col>
		<user-add-form :showUserAddForm.sync="showUserAddForm"></user-add-form> 
        <scheme-edit-form :showSchemeEditForm.sync="showSchemeEditForm"></scheme-edit-form> 
        <service-add-form :showServiceAddForm.sync="showServiceAddForm"></service-add-form>
    </el-col>
</template>

<script>
	import ContentTitle from '../components/ContentTitle.vue'
	import UserAddForm from "./UserAddForm.vue"
    import SchemeEditForm from "./SchemeEditForm.vue"
    import ServiceAddForm from "./ServiceAddForm.vue"
	import DrawMask from "./DrawMask.vue"
	import util from '../util/util'
	export default {
        components:{
			// CommonAsideNav,
			ContentTitle,
			UserAddForm,
            SchemeEditForm,
			ServiceAddForm,
			DrawMask
			
		},
		data(){
			return{
				canvasImg:"../../static/test.jpg",
				path:'',
				btnName:'',
				iconClass:'',
				showUserAddForm: false,
                showSchemeEditForm: false,
				showServiceAddForm:  false,
				defaultActive:'0-0',
				mockdata:[
                    {
                        text:'用户管理',
                        path:'user',
                        iconClass:'icon-third-yonghubangding-copy',
                        itemdata:[
                            {
                                text:'添加用户',
                                iconClass:'icon-third-ic_add'
                            }
                        ],
                    },
                    {
                        text:'方案管理',
                        path:'scheme',
                        iconClass:'icon-third-fanganchaxunjitiaozheng',
                        itemdata:[]
                    },
                    {
                        text:'分析服务管理',
                        path:'stream_service',
                        iconClass:'icon-third-bangding',
                        itemdata:[
                            {
                                id:'0',
                                text:'绑定服务',
                                iconClass:'icon-third-bangding1'
                            }
                        ]
                    }
                    
				]
			}
		},
		created(){
			this.path = util.getLastPath(this.$route.path);
			this.defaultActive = this.path==="user"?"0-0":this.path==="stream_service"?"2-0":"1";
		},
		watch:{
			'$route.path':function(){
				this.path = util.getLastPath(this.$route.path);
				// this.defaultActive = this.path==="user"?"0-0":this.path==="stream_service"?"2-0":"1-0";		
			}
		},
		updated(){

		},
		computed:{
			getIconClass:function(){
				let iconClass = "";
				switch(this.path){
					case "scheme": 
						iconClass = "el-icon-edit-outline";
						break;
					case "user": 
						iconClass = "el-icon-plus";
						break;
					case "stream_service": 
						iconClass = "el-icon-plus";
						break;
                    default: this.iconClass = ""; break;
				}
				return iconClass;
			},
			getBtnName:function(){
				let btnName = "";
				switch(this.path){
					case "scheme": 
						btnName = "更换方案";
						break;
					case "user": 
						btnName = "新增";
						break;
					case "stream_service": 
						btnName = "新增";
						break;
                    default: this.btnName = ""; break;
				}
				return btnName;
			},
			getBtnClickFunc:function(){
				let handleClick;
				switch(this.path){
					case "user": 
						handleClick = this.handleUserAdd;
						break;
					case "scheme": 
						handleClick = this.handleSchemeEdit;
						break;
					case "stream_service": 
						handleClick = this.handleStreamServiceAdd;
						break;
                    default: handleClick = null; break;
				}
				return handleClick;
			}
		},
		methods:{
			handleUserAdd:function(){
				this.showUserAddForm = true;
			},
			handleStreamServiceAdd:function(){
				this.showServiceAddForm = true;
			},
			handleSchemeEdit:function(){
				this.showSchemeEditForm = true;
			},
			submenuOpened:function(val){
				this.$router.push("/settings/"+this.mockdata[val].path);	
			},
			submenuItemclicked:function(val){
				const path = this.mockdata[val.menuIndex].path;
				if(path==="user"){
					this.handleUserAdd();
				}else if(path==="stream_service"){
					this.handleStreamServiceAdd();
				}
			}
		}
	}

</script>

<style scoped lang="scss">
.main{
	height: 100%;
}
</style>